import React from 'react';
import { Button, Card, Col, Row } from 'antd';
import './index.scss';

const PackageInfo = props => {
  const {
    orderItem: { consignee, consigneePhone, consigneeAddress, distribute, payMethod, username },
  } = props;
  return (
    <div className='distribution-info-root site-card-wrapper'>
      <Row gutter={16}>
        <Col span={6}>
          <Card title='收货人信息' bordered={false} extra={<Button type='link button'>修改</Button>}>
            <Row>
              <Col span={10} style={{ textAlign: 'right' }}>
                收货人：
              </Col>
              <Col>{consignee}</Col>
            </Row>
            <Row>
              <Col span={10} style={{ textAlign: 'right' }}>
                联系电话：
              </Col>
              <Col>{consigneePhone}</Col>
            </Row>
            <Row>
              <Col span={10} style={{ textAlign: 'right' }}>
                收货地址：
              </Col>
              <Col>{consigneeAddress}</Col>
            </Row>
          </Card>
        </Col>
        <Col span={6}>
          <Card title='配送信息' bordered={false}>
            <Row>
              <Col span={10} style={{ textAlign: 'right' }}>
                配送方式：
              </Col>
              <Col>{distribute}</Col>
            </Row>
          </Card>
        </Col>
        <Col span={6}>
          <Card title='付款信息' bordered={false}>
            <Row>
              <Col span={10} style={{ textAlign: 'right' }}>
                实付全额：
              </Col>
              <Col>???</Col>
            </Row>
            <Row>
              <Col span={10} style={{ textAlign: 'right' }}>
                付款方式：
              </Col>
              <Col>{payMethod}</Col>
            </Row>
            <Row>
              <Col span={10} style={{ textAlign: 'right' }}>
                付款时间：
              </Col>
              <Col>???</Col>
            </Row>
          </Card>
        </Col>
        <Col span={6}>
          <Card title='买家信息' bordered={false}>
            <Row>
              <Col span={10} style={{ textAlign: 'right' }}>
                买家姓名：
              </Col>
              <Col>{username}</Col>
            </Row>
            <Row>
              <Col span={10} style={{ textAlign: 'right' }}>
                买家留言：
              </Col>
              <Col>????</Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default PackageInfo;
